<!DOCTYPE HTML>
<html>
<!-- 订单池 -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title style="background-color: #00c6a7;">已接订单</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/ali-icon/iconfont.css" />
    <style type="text/css">
        .head-card {
            width: 95%;
            border-radius: 10px;
            margin: 0 auto;
            border: 1px solid #e5e5e5;
            box-shadow: 0px 0px 10px #E5E5E5;
        }

        .detail {
            border: 1px solid #00C6A7;
            color: #00C6A7;
            width: 70px;
            margin-left: -4px;
            border-radius: 50px;
            margin-top: 15px;
        }

        .list-card {
            width: 94%;
            border-radius: 6px;
            padding: 5px 10px;
            left: 10px;
            margin: 0 auto;
            margin-bottom: 10px;
            border: 1px solid #e5e5e5;
            box-shadow: 0px 0px 10px #E5E5E5;
        }
    </style>
</head>

<body style="background-color: white">
    <div id="app">
        <div class="aui-bar aui-bar-btn aui-bar-btn-full">
            <div class="aui-bar-btn-item" onclick="change_menu(0)">未接订单</div>
            <div class="aui-bar-btn-item" onclick="change_menu(3)">已接订单</div>
            <div class="aui-bar-btn-item aui-active">已完成订单</div>
        </div>
        <div class="aui-content aui-margin-b-15">
            <div class="aui-bar aui-bar-btn aui-bar-btn-full">
                <div class="aui-bar-btn-item" style="border: 1px solid #CCCCCC;" @click="previousMonth()">上一月</div>
                <div class="aui-bar-btn-item" style="border: 1px solid #CCCCCC;" @click="nextMonth()">下一月</div>
            </div>
            <ul class="aui-list aui-media-list" style="padding: 10px 0px;">
                <section class="aui-content aui-grid aui-margin-b-15 head-card">
                    <div class="aui-row" style="padding: 15px;">
                        <div class="aui-col-xs-3" style="border-right: 1px solid #e5e5e5;padding: 0">
                            <big>{{curData.month}}月</big>
                            <div class="aui-gird-lable aui-font-size-12">{{curData.year}}年</div>
                        </div>
                        <div class="aui-col-xs-3" style="padding: 0">
                            <big style="color: #00C6A7">{{curData.receiptQuantity}}</big>
                            <div class="aui-gird-lable aui-font-size-14">总订单量</div>
                        </div>
                        <div class="aui-col-xs-3" style="padding: 0;">
                            <big style="color: #00C6A7">{{curData.praiseQuantity}}</big>
                            <div class="aui-gird-lable aui-font-size-14">好评单量</div>
                        </div>
                        <div class="aui-col-xs-3" style="padding: 0">
                            <big style="color: #00C6A7">{{curData.negativeCommentQuantity}}</big>
                            <div class="aui-gird-lable aui-font-size-14">差评单量</div>
                        </div>
                    </div>
                </section>
                <div class="list-card" v-for="(order, index) in orderList" :key="index">
                    <li class="aui-list-item">
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title" style="color: #00C6A7;">洗车评分:</div>
                                    <div class="aui-list-item-right aui-ellipsis-2" v-if="order.evaluation == 0" style="color: #00C6A7;">未评价</div>
                                    <div class="aui-list-item-right aui-ellipsis-2" v-if="order.evaluation == 1" style="color: #00C6A7;">差评</div>
                                    <div class="aui-list-item-right aui-ellipsis-2" v-if="order.evaluation == 2" style="color: #00C6A7;">中评</div>
                                    <div class="aui-list-item-right aui-ellipsis-2" v-if="order.evaluation == 3" style="color: #00C6A7;">好评</div>
                                </div>
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">订单编号:</div>
                                    <div class="aui-list-item-right aui-ellipsis-2">{{order.sn}}</div>
                                </div>
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">服务名称:</div>
                                    <div class="aui-list-item-right aui-ellipsis-2">{{order.orderItems[0].goodsName}}</div>
                                </div>
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">服务时间:</div>
                                    <div class="aui-list-item-right aui-ellipsis-2">{{order.appointmentTime}}</div>
                                </div>
                            </div>
                        </div>
                    </li>
                </div>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/common/vue.js"></script>
<script type="text/javascript" src="../script/base64.js"></script>
<script type="text/javascript" src="../script/md5.js"></script>
<script type="text/javascript" src="../script/common/api.js"></script>
<script type="text/javascript" src="../script/my/receivedorders.js"></script>
<script type="text/javascript" src="../script/aui-popup-new.js"></script>
<script type="text/javascript">
    apiready = function() {
        //显示加载缓冲页面
        api.showProgress({
        });
        vm.init(); //初始化
    };

    change_menu = function(index) {
        if (index == 0) {
            vm.hasAcceptedOrderList(function() {
                api.setFrameGroupIndex({
                    name: 'IndexGroup',
                    index: index,
                    reload: true
                });
            });
        } else {
            api.setFrameGroupIndex({
                name: 'IndexGroup',
                index: index,
                reload: true
            });
        }
    }
</script>

</html>
